import React, { Component } from 'react'
import { connect } from 'react-redux'
import { 
  DeliveryWrapper,
  GoodsItem,
  SpanButton,
  ListWrapper
} from '@/style.js'
import { getAddCartItem,getRemoveCartItem } from '@/store/actionCreator.js'
import TotalPrice from '@/components/cart/totalPrice'



class MyCart extends Component {
  render() {
    return (
      <ListWrapper className="delivery-home-wrapper">
        {
          this.props.cartData.map((item, index) => {
            return <GoodsItem key={index}>
               <li> <img src={item.image} alt=''/> </li>
               <li> {item.name} </li> 
               <li>
                 <SpanButton width="35px" onClick={ () => this.props.addCart(index) }>+</SpanButton> 
                 <SpanButton width="35px">{item.count}</SpanButton> 
                 <SpanButton width="35px" onClick={ () => this.props.removeCart(index) }>-</SpanButton> 
               </li>
            </GoodsItem>
          })
        }
        <TotalPrice></TotalPrice>
      </ListWrapper>
    )
  }

}

const mapState = (state) => {
  return {
    cartData:state.cart.cartData
  }
}

const mapActions = (dispatch) => {
  return {
    addCart(index) {
      const action = getAddCartItem(index)
      dispatch(action)
    },
    removeCart(index) {
      const action = getRemoveCartItem(index)
      dispatch(action)
    }
  }
}

export default connect(mapState, mapActions)(MyCart)
